<!--
	作者：1979788761@qq.com
	时间：2022-02-02
	描述：列表滚动公告演示
-->
<!doctype html>
<html lang="en">

	<head>
		<!-- 页面编码 -->
		<meta charset="utf-8">
		<!-- 移动设备优先 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- 兼容Edge模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 极速模式 -->
		<meta name="renderer" content="webkit">
		<!-- 标题 -->
		<title>列表滚动公告演示</title>
		<!-- 关键字 -->
		<meta name="keywords" content="BlogUi,列表滚动公告演示" />
		<!-- 描述 -->
		<meta name="description" content="这是BlogUi列表滚动公告演示" />
		<!-- 作者 -->
		<meta name="author" content="大火兔" />
		<!-- 版权 -->
		<meta name="copyright" content="版权所有 BlogUi All Rights Reserved" />
		<!-- 搜索引擎索引向导 -->
		<meta name="robots" content="all" />
		<!-- 图标 -->
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<link rel="icon" type="image/svg+xml" href="favicon.ico" />
		<!-- 引入BlogUi.less -->
		<link rel="stylesheet/less" type="text/css" href="../css/blogui.less">
		<!-- 引入最新稳定版Less.js -->
		<script src="../js/less.min.js"></script>
	</head>

	<body>
		<div class="wrap">
			<h2>垂直滚动</h2>
			<div class="notice">
				<div class="icon">
					<span class="iconfont icon-notification"></span>
				</div>
				<div class="roll">
					<ul class="list-y">
						<li>
							<a href="#" target="_blank">白天做老板秘书，晚上做老板老婆是什么感受？</a>
						</li>
						<li>
							<a href="#" target="_blank">娘家拆迁分了两套新房，婆婆让我把房本写上小叔子的名</a>
						</li>
						<li>
							<a href="#" target="_blank">外卖员口述：夜班最怕女客户提出这种要求</a>
						</li>
						<li>
							<a href="#" target="_blank">前任一哭，现任必输</a>
						</li>
					</ul>
				</div>
			</div>
			<h2>水平滚动</h2>
			<div class="notice">
				<div class="icon">
					<span class="iconfont icon-notification"></span>
				</div>
				<div class="roll">
					<ul class="list-x">
						<li>
							<a href="#" target="_blank">白天做老板秘书，晚上做老板老婆是什么感受？</a>
						</li>
						<li>
							<a href="#" target="_blank">娘家拆迁分了两套新房，婆婆让我把房本写上小叔子的名</a>
						</li>
						<li>
							<a href="#" target="_blank">外卖员口述：夜班最怕女客户提出这种要求</a>
						</li>
						<li>
							<a href="#" target="_blank">前任一哭，现任必输</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<!-- 引入兼容IE8的jQuery版本 -->
	<script src="../js/jquery-1.12.4.min.js"></script>
	<!-- 引入BlogUi框架Js -->
	<script src="../js/blogui.js"></script>
	<!-- 引入你的JS -->
	<script src="../js/your.js"></script>

</html>